<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range with fixed minimum</title>
<!--  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">-->
  <link rel="stylesheet" href="css/blitzer/jquery-ui.css">
  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
<!--  <link rel="stylesheet" href="/resources/demos/style.css">-->
  <script>
  var minheight=500;  
  var maxheight=2600;
  var stepheight=10;

  var minwidth=900;  
  var maxwidth=2150;
  var stepwidth=10;

  $(function() {
 $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: minheight,
      max: maxheight,
      value: minheight,
      step: stepheight,
      slide: function( event, ui ) {
				var delay2=function (){
	        $( "#vamount" ).val( ui.value );
					updateVValue(event,ui);
	      }
				setTimeout(delay2, 5);
      }
    });

    $( "#vamount" ).val( $( "#slider-vertical" ).slider( "value" ) );

    $( "#slider-range-min" ).slider({
      range: "min",
      value: minwidth,
      min: minwidth,
      max: maxwidth,
      step: stepwidth,
      height:80,

      slide: function( event, ui ) {
				var delay=function (){
					updateValues(event,ui);
        	$( "#amount" ).val( ui.value );}
				setTimeout(delay, 5);
			},

			change: function(event, ui) {
				updateValues(event,ui);
			}

    });

    $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );

	  $( "#amount" ).keyup(function(){

	  	if  (($(this).val()>900)&&($(this).val()<2150)) {
	  		$( "#slider-range-min" ).slider("value",$(this).val());
	  	}	
	  });

	  $( "#amount" ).blur(function(){
	  	if (($(this).val()<=900)||($(this).val()>=2150)) {
		    $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
	  	}

	  	if  (($(this).val()>=900)&&($(this).val()<=2150)) {
	  		$( "#slider-range-min" ).slider("value",$(this).val());
	  	}	

    	$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
 
	  })
  
function updateVValue(event, ui)
		{

//				var offset = $('.ui-slider-handle').offset();
				var offset = $(ui.handle).offset()
				var value = ui.value;//$('#slider-range-min').slider('value');

//				var offset = ui.offset();
//				var value = ui.slider('value');

//				alert(value);
        $('#v_value').text(value);//.css({'top':offset.top});
        $('#v_value').offset({top:offset.top});
//        $('#debug').text($(ui.handle).offset().top);
		}


function updateValues(event, ui)
		{

//				var offset = $('.ui-slider-handle').offset();
				var offset = $(ui.handle).offset()
				var value = ui.value;//$('#slider-range-min').slider('value');

//				var offset = ui.offset();
//				var value = ui.slider('value');

//				alert(value);
        $('#value').text(value);//.css({'left':offset.left-14});
        $('#value').offset({left:offset.left-14});
        $('#debug').text($(ui.handle).offset().left);
		}

    $('#value').text($('#slider-range-min').slider('value')).css({'left':$('.ui-slider-handle').offset().left-12});

    $('#v_value').text($('#slider-vertical').slider('value'));//.css({'top':offset.top});
    $('#v_value').offset({top:$('#slider-vertical .ui-slider-handle').offset().top});
    $('#debug').text($('#slider-vertical .ui-slider-handle').offset().top);

		$('.ui-slider-range.ui-widget-header.ui-corner-all.ui-slider-range-min').css('background-position','right top');		  
		$('#slider-range-min').css('height','32px');		  
		$('#slider-vertical').css('width','32px');		  
  });
  </script>
</head>
<body>
 
<p>
  <label for="width">Ширина:</label>
  <input type="text" size="5" id="amount" style="border:0; color:#f6931f; font-weight:bold;">мм
</p>
<p>
  <label for="width">Высота:</label>
  <input type="text" size="5" id="vamount" style="border:0; color:#f6931f; font-weight:bold;">мм
</p>





<div style="position:relative; width:800px; overflow:inherit;"> 
	<div id="slider-vertical" style="height:200px;float:left;"></div>
	<div id="v_value" style="margin-left:10px;float:left;top:-3px;width:40px;text-align:center;background:red; color:white">&nbsp;</div>
</div>

<div  style="clear:both">Debug: <span id="debug" style="clear:both"> </span></div>


<div style="position:relative; width:800px; overflow:inherit;"> 
	<div id="value" style="position:relative;top:-3px;width:40px;text-align:center;background:red; color:white">&nbsp;</div>
	<div style="position:relative;float:left; width:100px">Min: 900мм</div>
 	<div style="position:relative;float:left; width:400px">
		<div id="slider-range-min"style="position:relative"></div>
 	</div>
	<div style="position:relative;float:left; width:100px">Max: 2150мм</div>
</div> 


</body>
</html>